Frontend Micro-Frontend Router: Navigacija između aplikacija

U modernom web razvoju, micro-frontend arhitektura je stekla značajnu popularnost kao način izgradnje velikih, složenih aplikacija. Uključuje razbijanje monolitnog frontenda na manje, neovisne i primjenjive jedinice (micro-frontende). Jedan od glavnih izazova u ovoj arhitekturi je upravljanje navigacijom između aplikacija, omogućavajući korisnicima da se neprimjetno kreću između ovih neovisnih micro-frontenda. Ovaj članak pruža sveobuhvatan vodič za usmjeravanje frontend micro-frontenda i navigaciju između aplikacija.

Što su Micro-Frontendi?

Micro-frontendi su arhitektonski stil u kojem se neovisno isporučive frontend aplikacije sastoje u jedinstveno, kohezivno korisničko iskustvo. Ovo je analogno mikroservisima u backendu. Svaki micro-frontend obično je u vlasništvu zasebnog tima, što omogućuje veću autonomiju, brže razvojne cikluse i lakše održavanje. Prednosti micro-frontenda uključuju:

• Neovisna implementacija: Timovi mogu implementirati svoje micro-frontende bez utjecaja na druge dijelove aplikacije.
• Raznolikost tehnologija: Različiti micro-frontendi mogu se graditi pomoću različitih tehnologija, omogućujući timovima da odaberu najbolji alat za posao. Na primjer, jedan tim može koristiti React, dok drugi koristi Vue.js ili Angular.
• Skalabilnost: Aplikacija se može lakše skalirati jer se svaki micro-frontend može skalirati neovisno.
• Poboljšano održavanje: Manje baze koda lakše je razumjeti i održavati.
• Autonomija tima: Timovi imaju više kontrole nad vlastitim kodom i razvojnim procesom.

Potreba za Micro-Frontend Routerom

Bez dobro definirane strategije usmjeravanja, korisnici će doživjeti nepovezano i frustrirajuće iskustvo prilikom navigacije između micro-frontenda. Micro-frontend router to rješava pružanjem centraliziranog mehanizma za upravljanje navigacijom u cijeloj aplikaciji. To uključuje rukovanje:

• Upravljanje URL-ovima: Osiguravanje da URL točno odražava trenutnu lokaciju korisnika unutar aplikacije.
• Upravljanje stanjem: Dijeljenje stanja između micro-frontenda kada je to potrebno.
• Lijeno učitavanje: Učitavanje micro-frontenda samo kada su potrebni za poboljšanje performansi.
• Autentifikacija i autorizacija: Rukovanje autentifikacijom i autorizacijom korisnika u različitim micro-frontendima.

Strategije navigacije između aplikacija

Postoji nekoliko pristupa implementaciji navigacije između aplikacija u micro-frontend arhitekturi. Svaki pristup ima svoje prednosti i nedostatke, a najbolji izbor ovisi o specifičnim zahtjevima vaše aplikacije.

1. Korištenje centraliziranog routera (Single-Spa)

Single-Spa je popularni okvir za izgradnju micro-frontenda. Koristi centralizirani router za upravljanje navigacijom između različitih aplikacija. Glavna aplikacija djeluje kao orkestrator i odgovorna je za renderiranje i demontiranje micro-frontenda na temelju trenutnog URL-a.

Kako to radi:

1. Korisnik navigira do određenog URL-a.
2. Single-spa router presreće promjenu URL-a.
3. Na temelju URL-a, router određuje koji micro-frontend bi trebao biti aktivan.
4. Router aktivira odgovarajući micro-frontend i demontira sve ostale aktivne micro-frontende.

Primjer (Single-Spa):

Recimo da imate tri micro-frontenda: home, products i cart. Single-spa router bi bio konfiguriran na sljedeći način:

import { registerApplication, start } from 'single-spa'; registerApplication( 'home', () => import('./home/home.app.js'), location => location.pathname === '/' ); registerApplication( 'products', () => import('./products/products.app.js'), location => location.pathname.startsWith('/products') ); registerApplication( 'cart', () => import('./cart/cart.app.js'), location => location.pathname.startsWith('/cart') ); start();

U ovom primjeru, svaki micro-frontend je registriran sa single-spa, a funkcija je pružena da odredi kada micro-frontend treba biti aktivan na temelju URL-a. Kada korisnik navigira do /products, products micro-frontend će biti aktiviran.

Prednosti:

• Centralizirana kontrola nad usmjeravanjem.
• Pojednostavljeno upravljanje stanjem (može se riješiti pomoću single-spa orkestratora).
• Lako se integrira s postojećim aplikacijama.

Nedostaci:

• Jedna točka neuspjeha. Ako orkestrator padne, cijela aplikacija je pogođena.
• Može postati usko grlo u performansama ako nije implementirano učinkovito.

2. Module Federation (Webpack 5)

Module Federation Webpacka 5 omogućuje vam dijeljenje koda između različitih Webpack buildova u vrijeme izvođenja. To znači da možete izložiti komponente, module ili čak cijele aplikacije iz jednog builda (host) u drugi (remote). To olakšava izgradnju micro-frontenda gdje je svaki micro-frontend zaseban Webpack build.

Kako to radi:

1. Svaki micro-frontend je izgrađen kao zaseban Webpack projekt.
2. Jedan micro-frontend je određen kao host aplikacija.
3. Host aplikacija definira koje module želi koristiti iz remote micro-frontenda.
4. Remote micro-frontend definira koje module žele izložiti host aplikaciji.
5. U vrijeme izvođenja, host aplikacija učitava izložene module iz remote micro-frontenda prema potrebi.

Primjer (Module Federation):

Pretpostavimo host aplikaciju i remote aplikaciju.

host/webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container; module.exports = { // ... plugins: [ new ModuleFederationPlugin({ name: 'host', remotes: { remote: 'remote@http://localhost:3001/remoteEntry.js', }, shared: ['react', 'react-dom'], }), ], };

remote/webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container; module.exports = { // ... plugins: [ new ModuleFederationPlugin({ name: 'remote', exposes: { './Button': './src/Button', }, shared: ['react', 'react-dom'], }), ], };

U ovom primjeru, host aplikacija koristi Button komponentu iz remote aplikacije. Opcija shared osigurava da obje aplikacije koriste istu verziju react i react-dom.

Prednosti:

• Decentralizirana arhitektura. Svaki micro-frontend je neovisan i može se razvijati i implementirati odvojeno.
• Dijeljenje koda. Module Federation omogućuje vam dijeljenje koda između različitih aplikacija u vrijeme izvođenja.
• Lijeno učitavanje. Moduli se učitavaju samo kada su potrebni, poboljšavajući performanse.

Nedostaci:

• Kompliciranije za postavljanje i konfiguriranje od single-spa.
• Zahtijeva pažljivo upravljanje zajedničkim ovisnostima kako bi se izbjegli sukobi verzija.

3. Web komponente

Web komponente su skup web standarda koji vam omogućuju stvaranje prilagođenih HTML elemenata za višekratnu upotrebu. Ove se komponente mogu koristiti u bilo kojoj web aplikaciji, bez obzira na korišteni okvir. To ih čini prirodnim izborom za micro-frontend arhitekture, jer pružaju tehnološki agnostičan način izgradnje i dijeljenja UI komponenti.

Kako to radi:

1. Svaki micro-frontend izlaže svoje UI kao skup web komponenti.
2. Glavna aplikacija (ili drugi micro-frontend) koristi ove web komponente uvozeći ih i koristeći ih u svom HTML-u.
3. Web komponente upravljaju vlastitim renderiranjem i logikom.

Primjer (Web komponente):

micro-frontend-a.js:

class MyComponent extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = `

Pozdrav iz Micro-Frontend A!

`; } } customElements.define('micro-frontend-a', MyComponent);

index.html (glavna aplikacija):

Glavna aplikacija

U ovom primjeru, datoteka micro-frontend-a.js definira web komponentu nazvanu micro-frontend-a. Datoteka index.html uvozi ovu datoteku i koristi web komponentu u svom HTML-u. Preglednik će renderirati web komponentu, prikazujući "Pozdrav iz Micro-Frontend A!".

Prednosti:

• Tehnološki agnostičan. Web komponente se mogu koristiti s bilo kojim okvirom ili bez okvira.
• Ponovna upotrebljivost. Web komponente se mogu lako ponovno koristiti u različitim aplikacijama.
• Enkapsulacija. Web komponente enkapsuliraju vlastite stilove i logiku, sprječavajući sukobe s drugim dijelovima aplikacije.

Nedostaci:

• Može biti opširnije za implementaciju od drugih pristupa.
• Možda će trebati polyfillovi za podršku starijim preglednicima.

4. Iframes

Iframes (Inline Frames) su starija, ali još uvijek održiva opcija za izolaciju micro-frontenda. Svaki micro-frontend radi unutar vlastitog iframea, pružajući visok stupanj izolacije. Komunikacija između iframea može se postići pomoću postMessage API-ja.

Kako to radi:

1. Svaki micro-frontend je implementiran kao zasebna web aplikacija.
2. Glavna aplikacija uključuje svaki micro-frontend u iframe.
3. Komunikacija između glavne aplikacije i micro-frontenda vrši se pomoću postMessage API-ja.

Primjer (Iframes):

index.html (glavna aplikacija):

Glavna aplikacija

U ovom primjeru, datoteka index.html uključuje dva iframea, svaki usmjeren na drugi micro-frontend.

Prednosti:

• Visok stupanj izolacije. Micro-frontendi su potpuno izolirani jedni od drugih, sprječavajući sukobe.
• Lako se implementira. Iframes su jednostavna i dobro razumljiva tehnologija.

Nedostaci:

• Može biti teško komunicirati između iframea.
• Može imati problema s performansama zbog režijskih troškova više iframea.
• Loše korisničko iskustvo zbog nedostatka besprijekorne integracije.

Upravljanje stanjem u micro-frontendima

Upravljanje stanjem u micro-frontendima je ključni aspekt navigacije između aplikacija. Može se koristiti nekoliko strategija:

• Stanje temeljeno na URL-u: Kodiranje stanja unutar URL-a. Ovaj pristup čini stanje aplikacije djeljivim putem URL-ova i lako označivim.
• Centralizirano upravljanje stanjem (Redux, Vuex): Korištenje globalne biblioteke za upravljanje stanjem za dijeljenje stanja između micro-frontenda. Ovo je posebno korisno za složene aplikacije sa značajnim dijeljenim stanjem.
• Prilagođeni događaji: Korištenje prilagođenih događaja za komunikaciju promjena stanja između micro-frontenda. Ovaj pristup omogućuje labavo povezivanje između micro-frontenda.
• Pohrana preglednika (LocalStorage, SessionStorage): Pohranjivanje stanja u pohranu preglednika. Ovaj je pristup prikladan za jednostavno stanje koje ne treba dijeliti između svih micro-frontenda. Međutim, budite oprezni s sigurnosnim razmatranjima prilikom pohrane osjetljivih podataka.

Autentifikacija i autorizacija

Autentifikacija i autorizacija su ključni aspekti svake web aplikacije, a postaju još važniji u micro-frontend arhitekturi. Uobičajeni pristupi uključuju:

• Centralizirana usluga autentifikacije: Namjenska usluga rukuje autentifikacijom korisnika i izdaje tokene (npr. JWT). Micro-frontendi tada mogu potvrditi ove tokene kako bi utvrdili autorizaciju korisnika.
• Zajednički modul autentifikacije: Zajednički modul odgovoran je za rukovanje logikom autentifikacije. Ovaj modul mogu koristiti svi micro-frontendi.
• Autentifikacija na rubu: Autentifikacija se vrši na rubu mreže (npr. pomoću obrnutog proxyja ili API gatewaya). Ovaj pristup može pojednostaviti logiku autentifikacije u micro-frontendima.

Najbolje prakse za usmjeravanje micro-frontenda

Evo nekoliko najboljih praksi koje treba imati na umu prilikom implementacije usmjeravanja micro-frontenda:

• Neka bude jednostavno: Odaberite najjednostavniju strategiju usmjeravanja koja zadovoljava vaše potrebe.
• Razdvojite micro-frontende: Smanjite ovisnosti između micro-frontenda kako biste promicali neovisan razvoj i implementaciju.
• Koristite dosljednu strukturu URL-ova: Održavajte dosljednu strukturu URL-ova u svim micro-frontendima kako biste poboljšali korisničko iskustvo i SEO.
• Implementirajte lijeno učitavanje: Učitajte micro-frontende samo kada su potrebni za poboljšanje performansi.
• Pratite performanse: Redovito pratite performanse svoje micro-frontend aplikacije kako biste identificirali i riješili uska grla.
• Uspostavite jasne komunikacijske kanale: Osigurajte da timovi koji rade na različitim micro-frontendima imaju jasne komunikacijske kanale za koordinaciju razvojnih napora i rješavanje svih problema s integracijom.
• Implementirajte robusno rukovanje pogreškama: Implementirajte robusno rukovanje pogreškama kako biste graciozno riješili pogreške u pojedinim micro-frontendima i spriječili da utječu na cijelu aplikaciju.
• Automatizirano testiranje: Implementirajte sveobuhvatno automatizirano testiranje, uključujući jedinice testove, integracijske testove i end-to-end testove, kako biste osigurali kvalitetu i stabilnost svoje micro-frontend aplikacije.

Zaključak

Usmjeravanje micro-frontenda složen je, ali bitan aspekt izgradnje skalabilnih i održivih web aplikacija. Pažljivim razmatranjem različitih strategija usmjeravanja i najboljih praksi navedenih u ovom članku, možete stvoriti besprijekorno i korisniku ugodno iskustvo za svoje korisnike. Odabir pravog pristupa, bilo da se radi o centraliziranom routeru poput Single-Spa, Module Federation, Web Components ili čak Iframes, ovisi o vašim specifičnim potrebama i prioritetima. Ne zaboravite dati prioritet razdvajanju, dosljednim strukturama URL-ova i optimizaciji performansi. Implementacijom dobro osmišljene strategije usmjeravanja, možete otključati puni potencijal micro-frontend arhitekture i izgraditi uistinu izvanredne web aplikacije za globalnu publiku.